<template>
    <p class="tb">按钮</p>
    <div class="box">
        <f-button :loading="loading" @click="openMessage">默认</f-button>
        <f-button round type="primary" @click="openMessage">Primary</f-button>
        <f-button round type="primary" @click="openMessage">Primary</f-button>
        <f-button :loading="loading" type="primary" @click="openLoading">Primary</f-button>
    </div>
    <p class="tb">链接</p>
    <div class="box">
        <f-link href="https://www.baidu.com" type="default">默认链接</f-link>
        <f-link href="https://www.baidu.com" type="primary" underline="always" target="_blank" disabled>主要链接 always
            _blank disabled</f-link>
        <f-link href="https://www.baidu.com" type="success" underline="hover" target="_self">成功链接 hover _self</f-link>
        <f-link href="https://www.baidu.com" type="warning" underline="never" target="_parent" disabled>警告链接 never
            _parent disabled</f-link>
        <f-link href="https://www.baidu.com" type="danger" underline="hover" target="_top">危险链接 hover _top</f-link>
        <f-link href="https://www.baidu.com" type="info" underline="hover" target="_blank" disabled>信息链接 hover _blank
            disabled</f-link>
    </div>
    <p class="tb">头像</p>
    <div class="box">
        <f-avatar size="small" src="./assets/images/fufu.gif"></f-avatar>
        <f-avatar src="很爱很爱你" hover></f-avatar>
        <f-avatar size="40">66</f-avatar>
    </div>
    <p class="tb">Tree</p>
    <div class="box">

    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { TMessage } from '@foff-ui/components'
import { Status } from '@foff-ui/components/types/index'


const openMessage = (type: Status) => {
    TMessage({
        type,
        message: '666',
        duration: 1000
    })
}
const loading = ref(false)
const openLoading = () => {
    loading.value = true

    setTimeout(() => {
        loading.value = false
    }, 2000)
}

</script>

<style lang="less" scoped>

.box {
    width: 100%;
    height: 40px;
    display: flex;
    gap: 20px;
    align-items: flex-end;
}
</style>
